<script lang="ts" setup>
import { ProductStatus, ProductClient } from '@/enum/product'
import useTable from '@/hooks/useTable'
import { TableRowSelection } from '@arco-design/web-vue'
import { get, message } from '@/utils'
const emit = defineEmits(['update:show', 'reset', 'confirm', 'cancel', 'update:list', 'update:id'])
const props = defineProps<{
  show: boolean
  info?: any
  defaultIds?: any[]
  type?: 'radio' | 'checkbox'
}>()
const { formatColumns } = useTable()
const formRef = ref()
const actionRef = ref()
const selectedKeys = ref([...(props.defaultIds || [])])
const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const list = ref<any[]>([])
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    get(
      {
        url: '/server-shop/sys-seller/goods/page',
        data: { size: params.pageSize, ...params },
      },
      ({ data, code }) => {
        list.value = data.records
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const submit = done => {
  if (!selectedKeys.value.length) {
    message({
      type: 'error',
      content: '至少选择意见商品',
    })
    done(false)
    return
  }
  const _list = list.value.filter(f => selectedKeys.value.some(id => f.id == id))
  emit('update:list', _list)
  emit('update:id', selectedKeys.value[0])
  emit('confirm', selectedKeys.value)
  emit('update:show', false)
  done(true)
}
const columns = formatColumns(
  [
    { title: '商品图片', dataIndex: 'img', width: 90, valueType: 'image' },
    { title: '商品名称', dataIndex: 'name', width: 200, hideInSearch: false, ellipsis: true },
    {
      title: '商品价',
      dataIndex: 'goodsPrice',
      width: 100,
      valueType: 'money',
    },
    // { title: '点击量', dataIndex: 'clickNum', width: 100 },
    // {
    //   title: '评价数',
    //   dataIndex: 'commentNum',
    //   width: 100,
    // },
    {
      title: '商品状态',
      dataIndex: 'status',
      width: 90,
      valueEnum: {
        [ProductStatus.下架中]: { text: '下架中', status: 'Error' },
        [ProductStatus.上架中]: { text: '上架中', status: 'Success' },
      },
    },

    // {
    //   title: '是否热门',
    //   dataIndex: 'isHot',
    //   width: 90,
    //   valueEnum: {
    //     1: { text: '是' },
    //     0: { text: '否' },
    //   },
    // },
    // {
    //   title: '是否推荐',
    //   dataIndex: 'isPush',
    //   width: 90,
    //   valueEnum: {
    //     1: { text: '是' },
    //     0: { text: '否' },
    //   },
    // },
    // { title: '销量', dataIndex: 'salesVolume', width: 90 },
    { title: '库存', dataIndex: 'stock', width: 90 },
    { title: '创建时间', dataIndex: 'createTime', width: 200 },
  ],
  { ellipsis: false }
)
const rowSelection = computed<TableRowSelection>(() => {
  if (props.type == 'checkbox') {
    return {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    }
  } else {
    return {
      type: 'radio',
    }
  }
})
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="1200px" title="商品列表" @cancel="emit('update:show', false)">
    <a-space direction="vertical" style="width: 100%">
      <ProTable
        :columns="columns"
        :request="request"
        row-key="id"
        :form-ref="ref => (formRef = ref)"
        :pagination="pagination"
        header-title=""
        :scroll="{ x: 1000 }"
        column-resizable
        :bordered="{ cell: true }"
        :action-ref="ref => (actionRef = ref)"
        v-model:selectedKeys="selectedKeys"
        :row-selection="rowSelection"
      >
        <template #option-render="{ dom, reset }">
          <component :is="dom[1]" />
          <component :is="dom[0]" />
        </template>
      </ProTable>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped></style>
